import React, { useEffect, useRef, useState } from 'react'
import * as echarts from 'echarts'
import style from './info.less'
import { Button } from 'antd'


// http
// ws

export default function info() {
    const [date, setDate] = useState(['2023-04-01', '2023-04-06', '2023-04-11', '2023-04-16', '2023-04-01', '2023-04-21', '2023-04-26'])
    const [list, setList] = useState([1, 2, 4, 0, 0, 2, 0])

    const add = () => {
        const data = [...date]
        const list2 = [...list]
        data.push("2023-05-01")
        list.push(3)
        setDate(data)
        setList(list2)
        init()
    }
    const init = () => {
        var myChart = echarts.init(document.getElementById("echartsHtml"));
        var option;
        option = {
            xAxis: {
                type: 'category',
                data: date
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: list,
                    type: 'line',
                    smooth: true
                }
            ]
        };

        option && myChart.setOption(option);

        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
    useEffect(() => {
        var myChart = echarts.init(document.getElementById("echartsHtml"));
        var option;
        option = {
            xAxis: {
                type: 'category',
                data: date
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: list,
                    type: 'line',
                    smooth: true
                }
            ]
        };

        option && myChart.setOption(option);

        window.addEventListener("resize", function () {
            myChart.resize();
        });
        return () => {
            console.log('销毁')
            myChart.dispose();
        }
    }, [])

    return (
        <>
            <div className={style.line} id='echartsHtml'></div>
            <Button onClick={add}>点我</Button>
        </>
    )
}
